<template>
  <div class="wrap">
    <div class="sticky">
      <h1 ref="coding">Less bezel, more screen.</h1>
    </div>
  </div>
</template>

<script>
export default {
  name: "textEntry",
  mounted(){
    const h1 = this.$refs['coding']
    document.addEventListener('scroll',(e)=>{
      let doc = document.documentElement
      let scrolled = doc.scrollTop / (doc.scrollHeight - doc.clientHeight)
      h1.style.setProperty("--percentag", `${scrolled * 100}%`);
    })
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
